<template>
  <div class="orderBox">
    <div v-show="xianAll">
      <var-list
        loading-text="正在努力输出"
        finished-text="一滴都没有了"
        error-text="出错了出错了"
        :finished="finished"
        v-model:loading="loading"
        @load="load"
      >
        <var-cell :key="item" v-for="item in allOrder">
      <!-- <template v-for="item in allOrder" :key="item"> -->
        <var-row>
          <var-col :span="3" :offset="1"
            ><img style="width: 40px; height: 40px" :src="item.pic"
          /></var-col>
          <var-col :span="8" style="textOverflow: ellipsis">{{
            item.dname
          }}</var-col>
          <var-col :span="4" :offset="8">已完成</var-col>
        </var-row>
        <var-divider inset />
        <var-row>
          <var-col
            :span="10"
            :offset="4"
            style="fontSize: 14px; fontWeight: 400"
            >{{ item.Sname }}</var-col
          >
          <var-col :span="2" :offset="8" style="fontSize: 12px; fontWeight: 400"
            >×{{ item.Quantity }}</var-col
          >
          <var-col
            :span="8"
            :offset="16"
            style="fontSize: 12px; fontWeight: 400"
            >共{{ item.Quantity }}件商品,实付￥{{ item.Price }}</var-col
          >
        </var-row>
        <var-row>
          <var-col :span="4" :offset="19"
            ><var-button size="small" color="#fff"
              >再来一单</var-button
            ></var-col
          >
        </var-row>
        <var-divider />
        </var-cell>
      </var-list>
      <!-- </template> -->
    </div>
    <div v-show="!xianAll">
      <img
        style="width: 260px; height: 200px; margin: 200px 0 0 60px"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014b665736c74b6ac72580ed8a0eae.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657935032&t=ef131f872edfbdf4aede2a5854c6cdcb"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getorderListAll } from "../../../api/dingdan";
let loading = ref(false);
let finished = ref(false);
let allOrder = ref([]);
let xianAll = ref(true);
// let list = ref([])

onMounted(() => {
  getorderListAll().then((data: any) => {
    allOrder.value = data.data;
    if (allOrder.value.length == 0) {
      xianAll.value = false;
    } else {
      xianAll.value = true;
    }
  });
});

//load方法什么时候执行 无限滚动有bug
let load = () => {
//  console.log("load..")
//  loading.value = false;
  loading.value = true;

 setTimeout(()=>{
   getorderListAll().then((data: any) => {
    allOrder.value = [...allOrder.value,...data.data]
    loading.value = false;
  });
 },2000)


  // setTimeout(() => {
  //   for (let i = 0; i <10; i++) {
  //     // [{},{},{}，{}]


  //     allOrder.value.push();
  //   }
  //   loading.value = false;
  //   if (allOrder.value.length >= 30) {
  //     // finished.value = true;  //加载完成
  //   }
  // }, 5000);
};
</script>

<style lang="scss">
.var-button {
  border: 1px solid #e9e9e9;
}
.var-col {
  text-align: left;
  align-items: center;
  height: 36px;
  margin-bottom: 0px;
  color: #000;
  text-align: center;
  background-clip: content-box;
}
.var-col:nth-child(2) {
  width: 100px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis !important;
  white-space: nowrap;
}
.var-col:nth-child(3) {
  font-size: 14px;
  font-weight: 300;
}
.var-col:nth-child(8) {
  font-size: 14px;
  font-weight: 300;
}

:deep(.var--box) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orderBox {
  width: 370px;
  min-height: 620px;
}
</style>
